輸出儲存的記錄 & 安裝 app 於實體手機

2022 iThome 鐵人賽

DAY 30

AI & Data

預測惱人的人事物：跟我一起學習如何用資料分析來避開他們系列第 30 篇

14th鐵人賽

kawayan_lin

2022-10-15 23:06:54

657 瀏覽

分享至

進度

今天預計將 Required 的部分處理完畢！

1. Required

~~實際依照星期幾來通知~~
輸出記錄的資料
打包成 apk 在實體機載入

2. Optional

UI 的按鈕優化
新增 App 圖示

輸出所有記錄

目前 getAllStoredRecords 的功能，只是透過 Alert 顯示儲存的訊息而已，並沒有處理到訊息輸出的部分。讓我們修改如下：

export const getAllStoredRecords = async () => {
  const keys = await getAllKeys();

  const records = await Promise.all(
    keys.map(async key => {
      const value = await getData(key);
      return {key, value};
    }),
  );

  const formattedRecords = JSON.stringify(records);

  return formattedRecords;
};

筆者調查了以後，發現 React Native 提供的 Share API 可以達成我們外部輸出的需求。

然而，若按照官方的文件實作，會跳出我們沒有提供 url 或是 message 的`錯誤`：

export const shareStoredRecords = async () => {
  const message = await getAllStoredRecords();

  try {
    await Share.share({
      message,
    });
  } catch (error) {
    console.error(error.message);
  }
};

看了一下型別，確定我們沒有帶錯：

export type ShareContent =
    | {
          title?: string | undefined;
          message: string;
      }
    | {
          title?: string | undefined;
          url: string;
      };

理論上，我們只要提供 url 或是 message 擇一就可以了，這邊有 bug。

嘗試了一陣子後，筆者參照了這篇 stackoverflow，再試試看幾種組合之後，發現以下這種寫法可以順利輸出，也順道留言提供解法：

export const shareStoredRecords = async () => {
  const message = await getAllStoredRecords();

  try {
    await Share.share({
      message,
      url: message,
    });
  } catch (error) {
    console.error(error.message);
  }
};

接著我們在 App.js 建立一個按鈕，其 onPress 的動作是執行 shareStoredRecords：

功能完成！

附帶處理：確認刪除資料

筆者預計在正式環境保留一鍵刪除資料的功能。

原因在於如果我們已經輸出資料了，可以透過這個功能將本地的資料清空，避免將來重複輸出。

但今天發現刪除所有儲存的資料之前，沒有確認的步驟，似乎有點危險。所以我們在 AnnoyancePrediction/src/asyncStorage.js 加入以下的 function 吧：

export const confirmClearAll = async () => {
  Alert.alert('刪除資料', '確定是否要刪除嗎？', [
    {
      text: '取消',
      style: 'cancel',
    },
    {text: '確認刪除！', onPress: clearAll, style: 'destructive'},
  ]);
};

然後讓我們回到 App.js 把原先按鈕對應的 clearAll 替換成 confirmClearAll，如此在正式環境就不會不小心手殘刪除了！

建立 apk 檔 & 實體安裝

今天的重頭戲，讓我們在手機裝上寫好的 app 來使用吧。

依照官方將 app 發佈到 Google Play Store 的文件操作即可，筆者將步驟整理如下：

建立 upload key
1. 筆者使用的是 Macbook，依照此段指示建立：連結。
2. 找到 JDK 的目錄，在該目錄底下用官網的指令生成 key。
3. 生成的過程中，會問你密碼為何，這邊需要記下來，之後的步驟用得到，其他資訊為選填。
4. 將這把 key 移到我們專案中 AnnoyancePrediction/android/app 底下
建立 gradle.properties
1. 在 home directory 的 .gradle 資料夾建立 gradle.properties。路徑 /Users/<你的名字>/.gradle。
2. 不建議使用我們的專案中 AnnoyancePrediction/android/gradle.properties，因為這個檔案會被 git 追蹤，有資安風險。
3. 編輯 gradle.properties，加入這四行：
```
MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=<剛剛 key 填的密碼>
MYAPP_UPLOAD_KEY_PASSWORD=<剛剛 key 填的密碼>
```
修改 Gradle config
1. 需注意是 android/app/build.gradle，而不是 android/build.gradle。
2. 找到程式碼中 android 的 block，依照官方的指示，修改裡面的 properties。注意，官方的指示中有 ... 為省略符號，不需要加入。
bundle 並建立 release 版本
1. 回到 AnnoyancePrediction/android，在 terminal 輸入 ./gradlew bundleRelease 。
2. 接著輸入 npx react-native run-android --variant=release 。
build 完以後，我們可以取得 apk 檔實測。apk 檔在以下路徑：AnnoyancePrediction/android/app/build/outputs/apk/release。